<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
        --s: 200px; /* image size */
        --b: 6px; /* border thickness */
        --c: #ae3ec9; /* border color */
        --cb: #e9ecef; /* background color */
        --f: 1; /* initial scale */
        
        width: var(--s);
        aspect-ratio: 1;
        padding-top: calc(var(--s)/5);
        cursor: pointer;
        border-radius: 0 0 999px 999px;
        --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
        --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
        outline: var(--b) solid var(--c);
        outline-offset: var(--_o);
        background: 
            radial-gradient(
            circle closest-side,
            var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
            ) var(--_g);
        -webkit-mask:
            linear-gradient(#000 0 0) no-repeat
            50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
            radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
        transform: scale(var(--f));
        transition: .5s;
        }
        img:hover {
        --f: 1.4; /* hover scale */
        }


        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-content: center;
            grid-auto-flow: column;
            gap: 30px;
            background: #E0E4CC;
        }
    </style>
</head>
<body>
    <img src="img/avatar.webp" alt="Adam argyle" >
</body>
</html>